<template>
<el-date-picker  v-model="range" type="datetimerange" unlink-panels :shortcuts="shortcuts" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"  />
</template>
<script lang="ts" setup>
import { ref,watch } from "vue"
import dayjs from "dayjs"
const shortcuts = [
  {
    text: '近7天',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近3个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
interface Props {
  beginTime?: Date,
  endTime?: Date
}
const props =  withDefaults(defineProps<Props>(), {
  beginTime: undefined,
  endTime: undefined
})
const range = ref<any>([props.beginTime, props.endTime])

interface Emits { //定义事件
    (e: 'update:beginTime', value: any): void,
    (e: 'update:endTime', value: any): void
}
const emit = defineEmits<Emits>()
watch(()=>range.value,() => {
  console.log(range)
  emit('update:beginTime', dayjs(range.value[0]).format('YYYY-MM-DD hh:mm:ss'))
  emit('update:endTime', dayjs(range.value[1]).format('YYYY-MM-DD hh:mm:ss'))
})
watch(()=>props.beginTime,() => {
  range.value[0] = props.beginTime
})
watch(()=>props.endTime,() => {
  range.value[1] = props.endTime
})
</script>